<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="68px"
    >
      <el-form-item style="float: right">
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >刷新</el-button
        >
      </el-form-item>
    </el-form>
    <el-table :data="ruleList">
      <el-table-column
        label="油站id"
        align="left"
        prop="stationId"
        v-if="false"
      />
      <el-table-column label="规则" align="left">
        <template slot-scope="scope">
          <div v-show="scope.row.oilType == 1">
            <span v-show="scope.row.ruleType == 3">以加油升数累计</span>
            <span v-show="scope.row.ruleType == 1">以订单实付金额累计</span>
            <span v-show="scope.row.ruleType == 2">以订单应付金额累计</span>
            <span>满{{ scope.row.ruleTerms }}</span>
            <span v-show="scope.row.ruleType == 3">L起累计</span>
            <span v-show="scope.row.ruleType != 3">元起累计</span>
            <span>{{ scope.row.oilName }}油</span>
            <span v-show="scope.row.gread == '所有人'"
              >{{ scope.row.gread }}每消费</span
            >
            <span v-show="scope.row.gread != '所有人'"
              >{{ scope.row.gread }}会员每消费</span
            >
            <span>{{ scope.row.saleAmt }}</span>
            <span v-show="scope.row.ruleType == 3">L</span>
            <span v-show="scope.row.ruleType != 3">元</span>
            <span>{{ scope.row.integral }}积分</span>
          </div>
          <div v-show="scope.row.oilType == 2">
            <span>非油品满{{ scope.row.ruleTerms }}元起累计每消费</span>
            <span
              >{{ scope.row.saleAmt }}元兑换{{ scope.row.integral }}积分</span
            >
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="积分规则是否开启"
        align="left"
        prop="integralFlag"
        width="100px;"
      >
        <template slot-scope="scope2">
          <span v-show="scope2.row.integralFlag == 1">开启</span>
          <span v-show="scope2.row.integralFlag == 2">关闭</span>
        </template>
      </el-table-column>
      <el-table-column
        label="油站名称"
        align="left"
        prop="stationName"
        width="100px;"
      />
      <el-table-column
        label="积分活动时限"
        align="left"
        prop="termDateManage"
        :formatter="termDateManageFormat"
        width="120px;"
      />
      <el-table-column
        label="多倍积分活动"
        align="left"
        prop="integralActivity"
        :formatter="integralActivityFormat"
        width="100px;"
      />
      <el-table-column
        label="周期类型"
        align="left"
        prop="datePicker"
        :formatter="datePickerFormat"
        width="100px;"
      />
      <el-table-column
        label="积分比例"
        align="left"
        prop="integralProportion"
        width="100px;"
      >
        <template slot-scope="scope1">
          <span>{{ scope1.row.integralProportion }}</span>
          <span v-show="scope1.row.integralProportion != ''">倍</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { listRuleInfo } from "@/api/integral/rule";
export default {
  name: "Rule",
  data() {
    return {
      // 弹出层标题
      title: "",
      total: 0,
      // 是否显示弹出层
      open: false,
      ruleList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      queryInfo: {},
      // 表单参数
      form: {
        itemsDetail: [{}],
        notOilList: [{}],
        imgFileList: [],
      },
      // 表单校验
      rules: {},
    };
  },
  created() {
    this.getList();
    this.getDicts("term_date").then((response) => {
      this.termDateManageOptions = response.data;
    });
    this.getDicts("expiration").then((response) => {
      this.expirationOptions = response.data;
    });
    this.getDicts("integral_deduction_oil").then((response) => {
      this.integralDeductionOilOptions = response.data;
    });
    this.getDicts("integral_manage").then((response) => {
      this.integralActivityOptions = response.data;
    });
  },
  methods: {
    /** 查询列表 */
    getList() {
      //积分规则信息
      listRuleInfo(this.queryParams).then((response) => {
        this.ruleList = response.rows;
        this.total = response.total;
      });
    },
    termDateManageFormat(row, column) {
      if (row.termDateManage === "1") {
        return "不指定结束时间";
      } else if (row.termDateManage === "2") {
        return "指定结束时间";
      }
    },
    integralActivityFormat(row, column) {
      if (row.integralActivity === "1") {
        return "开启";
      } else if (row.integralActivity === "0") {
        return "关闭";
      }
    },
    datePickerFormat(row, column) {
      if (row.datePicker === "1") {
        return "每周指定日";
      } else if (row.datePicker === "2") {
        return "每月指定日";
      } else if (row.datePicker === "3") {
        return "固定活动日";
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
  },
};
</script>
